<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"></tables>
    </Card>
    <Modal
      v-model="repairModalVisible"
      title="编辑报修信息"
      @on-cancel="closeRepairModal">
      <Form :model="currentRepairItem" label-position="top">
        <FormItem label="报修序号">
          <Input v-model="currentRepairItem.id" readonly />
        </FormItem>
        <FormItem label="报修用户">
          <Input v-model="currentRepairItem.userid" />
        </FormItem>
        <FormItem label="创建时间">
          <DatePicker v-model="currentRepairItem.createTime" type="date" placeholder="选择日期"></DatePicker>
        </FormItem>
        <FormItem label="报修详情">
          <Input v-model="currentRepairItem.repair_desc" type="textarea" />
        </FormItem>
        <FormItem label="房间号">
          <Input v-model="currentRepairItem.house_id" />
        </FormItem>
        <FormItem label="现场照片">
          <img :src="currentRepairItem.repairimg" class="img-thumbnail" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="saveRepair">保存</Button>
        <Button @click="closeRepairModal">取消</Button>
      </div>
    </Modal>
  </div> 
</template>

<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
import { render } from 'vuedraggable';
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        { title: '报修序号', key: 'id', sortable: true },
        { title: '报修用户', key: 'userid', editable: true },
        { title: 'Create-Time', key: 'createTime' },
        { title: '报修详情', key: 'repair_desc' },
        { title: '房间号', key: 'house_id' },
        { title: '现场照片', key: 'repairimg', render: (h, params) => { return h('div', [ h('img', { attrs: { src: params.row.repairimg } }) ]) } },
        {
          title: 'Handle',
          key: 'handle',
          button: [
            (h, params) => {
              return h('div', [
                h('Button', {
                  props: { type: 'primary', size: 'small' },
                  style: { marginRight: '5px' },
                  on: { click: () => this.handleEditRepair(params) }
                }, '编辑'),
                h('Poptip', {
                  props: { confirm: true, title: '你确定要删除吗?' },
                  on: { 'on-ok': () => this.handleDeleteRepair(params) }
                }, [
                  h('Button', { props: { type: 'error', size: 'small' } }, '删除')
                ])
              ]);
            }
          ]
        }
      ],
      repairModalVisible: false, 
      currentRepairItem: {}, 
      tableData: [
        { id: 'RX001', userid: 'U1001', createTime: '2024-11-11T08:00:00Z', repair_desc: '水龙头漏水', house_id: '101', repairimg: 'http://example.com/repair1.jpg' },
        { id: 'RX002', userid: 'U1002', createTime: '2024-11-12T09:00:00Z', repair_desc: '电路故障', house_id: '102', repairimg: 'http://example.com/repair2.jpg' },
        { id: 'RX003', userid: 'U1003', createTime: '2024-11-13T10:00:00Z', repair_desc: '门锁损坏', house_id: '103', repairimg: 'http://example.com/repair3.jpg' },
        { id: 'RX004', userid: 'U1004', createTime: '2024-11-14T11:00:00Z', repair_desc: '管道堵塞', house_id: '104', repairimg: 'http://example.com/repair4.jpg' },
        { id: 'RX005', userid: 'U1005', createTime: '2024-11-15T12:00:00Z', repair_desc: '灯具更换', house_id: '105', repairimg: 'http://example.com/repair5.jpg' },
        { id: 'RX006', userid: 'U1006', createTime: '2024-11-16T13:00:00Z', repair_desc: '空调维修', house_id: '106', repairimg: 'http://example.com/repair6.jpg' },
        { id: 'RX007', userid: 'U1007', createTime: '2024-11-17T14:00:00Z', repair_desc: '地板修复', house_id: '107', repairimg: 'http://example.com/repair7.jpg' },
        { id: 'RX008', userid: 'U1008', createTime: '2024-11-18T15:00:00Z', repair_desc: '窗户维修', house_id: '108', repairimg: 'http://example.com/repair8.jpg' },
        { id: 'RX009', userid: 'U1009', createTime: '2024-11-19T16:00:00Z', repair_desc: '墙面粉刷', house_id: '109', repairimg: 'http://example.com/repair9.jpg' },
        { id: 'RX010', userid: 'U1010', createTime: '2024-11-20T17:00:00Z', repair_desc: '电梯故障', house_id: '110', repairimg: 'http://example.com/repair10.jpg' }
      ]
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    handleEditRepair(params) {
      this.currentRepairItem = {...params.row};
      this.repairModalVisible = true;
    },
    handleDeleteRepair(params) {  
      console.log(params)
    },
    saveRepair() {
      this.repairModalVisible = false;
    },
    closeRepairModal() {
      this.repairModalVisible = false;
    }
  },
  mounted () {
    getTableData().then(res => {
      console.log(res)
      // this.tableData = res.data
    })
  }
}
</script>
<style>
</style>
